import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('BottomAppBar 示例')),
        body: const Center(child: Text('这里是页面主体内容')),
        bottomNavigationBar: BottomAppBar(
          color: Colors.blue, // 设置背景颜色
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 图标均匀分布
            children: <Widget>[
              IconButton(icon: const Icon(Icons.home), onPressed: () {}),
              IconButton(icon: const Icon(Icons.message), onPressed: () {}),
              IconButton(
                icon: const Icon(Icons.blur_circular),
                onPressed: () {},
              ),
              IconButton(icon: const Icon(Icons.person), onPressed: () {}),
            ],
          ),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0; // 当前页面索引
  final List<Widget> _pages = [
    // 页面列表
    Container(),
    Container(),
    Container(),
  ];

  // 构建底部导航项
  Widget _buildBotomItem(int index, IconData icon, String label) {
    return IconButton(
      icon: Icon(icon),
      color: _currentIndex == index ? Colors.blue : Colors.grey, // 选中状态颜色
      onPressed: () {
        setState(() {
          _currentIndex = index; // 更新当前索引
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          /* 处理FAB点击 */
        },
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            _buildBotomItem(0, Icons.home, '首页'),
            _buildBotomItem(1, Icons.search, '搜索'),
            // 为 FAB 预留空间
            const SizedBox(width: 48),
            _buildBotomItem(2, Icons.person, '我的'),
          ],
        ),
      ),
    );
  }
}
